<template>
  <div>
  <div class="topBar">
    <div class="app-header">
      <div class="title">微信</div>
      <router-link tag="div" class="search" to="/search">
        <img src="../../assets/搜索.png" height="20" width="20">
      </router-link>
      <div class="plus" @click="logClick">
        <img src="../../assets/加号.png" height="20" width="20">
      </div>
    </div>
  </div>
    <Plus :is-show="isShowPlus" @on-close="closeDialog"></Plus>
  </div>
</template>
<style>
  .topBar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background: #f2f2f2;
    /*z-index: 2;*/
  }
  .app-header{
    background-color: #1e2b39;
    height: 50px;
    color: #fff;
    position: absolute;
    width: 100%;
    /*z-index: 9;*/
    left: 0;
    top: 0;
  }
  .title{
    font-size: 18px;
    padding-top: 14px;
    padding-left: 14px;
  }
  .topBar .tx {
    float: right;
  }
  .search img{
    position: absolute;
    top: 14px;
    right: 80px;
  }
  .plus img{
    position: absolute;
    top: 14px;
    right: 24px;
  }
  .user_tx img {
    border-radius: 50%
  }
</style>
<script>
  import Plus from '../../components/plus/plus'

  export default {
    data() {
      return {
        isShowPlus: false
      }
    },
    computed: {
      userData() {
        return this.$store.state.user;
      },
      dialogueData() {
        return this.$store.state.dialogue;
      }
    },
    methods: {
      closeDialog() {
        this.isShowPlus = false
      },
      logClick() {
        this.isShowPlus = true
      },
      doNothing: function () {
        return;
      }
    },
    components: {
      Plus,
    }
  }
</script>
